<template>
	<view class="content">
		<view class="adress">所属驻点：{{extra}}
		 <uni-icons type="home" @click="goLogin" style="margin-left:10rpx"></uni-icons>
		</view>
		<view class="top-tab">
			<view @click="sort = 'DISTANCE'" class="top-tab-item" 
			:class="sort === 'DISTANCE'?'active':''" >距离最近</view>
			<view @click="sort = 'PRICE'" class="top-tab-item"
			:class="sort === 'PRICE'?'active':''" >总价最高</view>
		</view>
		<view class="orderlist" v-if='list.length>0'>
			<view class="orderItem" v-for="(item, i) in list" :key="i" @click="goDetail(i)">
				<view class="item flexBC">
					<view class="name">服务项目：</view>
					<view class="value">{{item.washMenu.menuName}}</view>
				</view>
				<view class="item flexBC">
					<view class="name">服务时间：</view>
					<view class="value">{{item.serviceDateStr}}</view>
				</view>
				<view class="item flexBC">
					<view class="name">服务地址：</view>
					<view class="value">
						<text>{{item.fullAddress}}</text>
						<image :src="$getImageSrc('home_ic_dw.png')" mode=""></image>
					</view>
				</view>
				<view class="item-bottom flexBC">
					<all-price class="allPrice" :price='item.washMenu.cost' name='订单总价'></all-price>
					<button class="btn" @click.stop="jdFn(item)" type="default">我要接单</button>
				</view>
			</view>
		</view>
		<no-list tipInfo='附近暂无订单!' v-else></no-list>
		<my-popup 
		   ref="myPopup"
		   tipInfo="是否确认接单？请合理安排时间,避免迟到." 
		   leftBtn="取消"
		   rightBtn="确认接单"
		   @clickFn="sureOrder"
		></my-popup>
	</view>
</template>

<script>
import { orderTask, receiveOrder } from '@/untils/api'
	export default {
		data() {
			return {
				sort:'DISTANCE',
				list:[],
			    sn:'',
				extra:''
			}
		},
		watch:{
			sort(){
				this.getOrderList()
			}
		},
		onShow(){
			this.getOrderList()
			const extra = this.$getStorageSync('userInfo').extra || [];
            this.extra = extra.join(',');
		},
		methods: {
			goLogin(){
				uni.reLaunch({
					url:'/subpackage/login/bindNo',
					success:() => {
						this.$removeStorageSync('satoken')
					}
				})	
			},
			goDetail(i){
			   this.$setStorageSync('orderInfo', this.list[i])
			   uni.navigateTo({
				   url:'/pages/takeOrder/orderInfo'
			   })	
			},
			jdFn(item){
				this.sn = item.sn
				this.$refs.myPopup.$refs.myPopup.open()
			},
			sureOrder(type){
				if(type === 'right'){
					receiveOrder({sn:this.sn}).then((res) => {
						if(res.code === 200){
							uni.showToast({
								icon:'none',
								title:'接单成功'
							})
							this.getOrderList()
						}else{
							uni.showToast({
								icon:'none',
								title:res.msg
							})
						}
					})
				}else{
					this.$refs.myPopup.$refs.myPopup.close()
				}
				
			},
			getOrderList(){
				orderTask({sort:this.sort}).then((res) => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .content{
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	  background-image: url('../../static/image/bg_fwd.png');
	  background-color: #F7F7F7;
	  background-repeat:no-repeat;
	  background-position: top;
	  background-size: 100%;
	  font-size: 28rpx;
	  .adress{
		  width: 686rpx;
		  margin: 0 auto;
		  color: #2A2B2B;
		  margin-top: 180rpx;
		  font-weight: 800;
		  line-height: 80rpx;
		  font-size: 32rpx;
	  }
	  .top-tab{
		  width: 686rpx;
		  height: 80rpx;
		  margin: 0 auto 20rpx;
		  background: #fff;
		  border-radius: 20rpx;
		  overflow: hidden;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  font-weight: 800;
		  .top-tab-item{
			  width: 49%;
			  text-align: center;
			  color: #02B1AA;
			  height: 72rpx;
			  line-height: 72rpx;
			  border-radius: 20rpx;
		  }
		  .top-tab-item.active{
			  background: #02B1AA;
			  color: #fff;
		  }
		  
	  }
	  .orderlist{
		  width: 686rpx;
		  margin: 0rpx auto 0;
		  background-color: #f7f7f7;
		  height: calc(100% - 340rpx);
		  border-radius: 20rpx;
		  overflow: auto;
		  .orderItem{
			  box-sizing: border-box;
			  padding: 20rpx;
			  border-radius: 20rpx;
			  background: #fff;
			  margin-bottom: 20rpx;
			  .item{
				  line-height: 80rpx;
				  height: 80rpx;
				  .name{
					  color: #AEB3B3;
					  width: 160rpx;
				  }
				  .value{
					  width: calc(100% - 160rpx);
					  display: flex;
					  justify-content: flex-end;
					  align-items: center;
					  text-align: right;
					  color: #2A2B2B;
					  image{
						  margin-left: 8rpx;
						  width: 32rpx;
						  height: 26rpx;
					  }
				  }
			  }
			  .item-bottom{
				  border-top: 1px solid #eee;
				  height: 100rpx;
				  .btn{
					  background-color: #02B1AA;
					  color: #fff;
					  width: 192rpx;
					  height: 72rpx;
					  line-height: 72rpx;
					  border-radius: 60rpx;
					  font-size: 30rpx;
					  margin: 0;
				  }
			  }
		  }
	  }
  }
</style>
